@import '../../theme/style/variables.module.less';

.input {
    outline: none;
    border-color: var(--mi-password-input-border);
    box-shadow: none;
    .transition();
}

.tips {
    .flex(flex-start, center, column);
}

.strength {
    .properties(width, 40);
    .properties(height, 12);
    display: inline-block;
    .properties(margin-right);
    background: var(--mi-password-strength-item-background-default);

    &:last-child {
        margin-right: 0;
    }

    &-active {
        background: var(--mi-password-strength-item-background-active);
    }

    &-item {
        .flex(center, flex-start);
        .properties(line-height, 24);
        width: auto;

        &:first-child {
            justify-content: flex-start;
        }

        :global {
            .anticon {
                .properties(font-size, 24);

                &.failed,
                &.success {
                    .properties(font-size, 14);
                    color: var(--mi-password-strength-item-error);
                    .properties(margin-right);
                }

                &.success {
                    color: var(--mi-password-strength-item-success);
                }
            }
        }

        &-tips {
            color: var(--mi-password-strength-item-tips);
        }
    }

    &-group {
        .flex();

        .properties(margin-left);
        .properties(margin-right);
    }
}

.item {
    :global {
        .ant-form-item-control-input {
            .ant-form-item-control-input-content {
                .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled) {
                    border-color: var(--mi-password-error);
                    box-shadow: none;
                }
            }
        }

        .ant-form-item-explain {
            .ant-form-item-explain-error {
                color: var(--mi-password-error);
                .properties(text-indent, 16);
                .properties(padding-top, 2);
                .font-size(12);
            }
        }
    }
}

.popover {
    .flex();
    max-width: 98%;
}

:export {
    --password-error: var(--mi-error);
    --password-input-border: var(--mi-primary);
    --password-strength-item-error: var(--mi-error);
    --password-strength-item-success: var(--mi-primary);
    --password-strength-item-tips: var(--mi-primary);
    --password-strength-item-background-active: var(--mi-primary);
    --password-strength-item-background-default: var(--mi-outline);
}